<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="../css/mui.min.css">
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="../css/app.css" />

		<style>
			
			.app-download-popup.show {
    display: block;
}

.app-download-popup {
    display: none;
    position: fixed;
    overflow: auto;
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    font-family: "Hiragino Sans GB";
    background-color: rgba(0,0,0,.3);
}


.app-download-popup.smally .app-download-popup-inner {
    width: 250px;
    border-radius: 6px;
    height: auto;
    overflow: visible;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.app-download-popup .app-download-popup-inner {
    position: relative;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    margin: 0 auto;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
}
.app-download-popup.smally .btn-close {
    top: -35px;
    background-image: url(//gw.alicdn.com/tps/TB1t4cwKVXXXXbjXXXXXXXXXXXX-64-64.png);
}

.app-download-popup .btn-close {
    position: absolute;
    display: block;
    top: 1px;
    right: 1px;
    width: 32px;
    height: 32px;
    background-image: url(//gw.alicdn.com/tps/TB16FBELXXXXXbwXFXXXXXXXXXX-64-64.png);
    background-repeat: no-repeat;
    background-size: contain;
}		

.app-download-popup .banner {
    width: 100%;
}	
	.app-download-popup .btn-wrapper {
    text-align: center;
}		
.app-download-popup .btn-download {
    position: relative;
    display: inline-block;
    color: #fff;
    font-size: 18px;
    margin-top: 5px;
    padding: 8px 30px 8px 20px;
    background-color: #e8203d;
    border-radius: 6px;
    box-shadow: 0 5px 2px #900E21;
    outline: 0;
    text-decoration: none;
}			
	.app-download-popup.smally .btn-hide {
    color: red;
}

.app-download-popup .btn-hide {
    display: inline-block;
    margin-top: 18px;
    margin-bottom: 8px;
    font-size: 18px;
    color: #A81C33;
    color: #fff;
    background-color: transparent;
    border: 0;
    outline: 0;
}		
			
		</style>

	</head>

	<body>
		<!--<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">cardview（卡片视图）</h1>
		</header>-->

		<div class="app-download-popup smally show" data-spm="app-download-popup">
			<div class="app-download-popup-inner" style="background-image: url(&quot;//gw.alicdn.com/tps/TB19f3WKVXXXXcUXpXXXXXXXXXX-613-667.png&quot;);"><i class="btn-close"></i><img class="banner" src="//gw.alicdn.com/tps/TB10WyROFXXXXcuXpXXXXXXXXXX-613-483.png">
				<div class="btn-wrapper">
					<a class="btn-download" href="https://pages.tmall.com/wow/portal/act/app-download?mmstat=downloadpop_mdetail&amp;src=downloadpop&amp;pos=1&amp;dl_ttid=downloadpop_mdetail&amp;acm=201602292.1003.8.1638440&amp;type=web&amp;scm=1003.8.201602292.OTHER_1492375571030_1638440&amp;key=https%3A%2F%2Fpages.tmall.com%2Fwow%2Fmit%2Fact%2Fnewcomer%3Fchannel%3Ddownloadpop">下载领取</a>
				</div>
				<div class="btn-wrapper"><button class="btn-hide">继续浏览</button></div>
			</div>
		</div>

		<script src="../js/mui.min.js"></script>
	</body>

</html>